<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .color{
            color: aquamarine;
        }
        .bgcolor01{
            background-color: brown;
        }
        .bgcolor02{
            background-color: gray;
        }
        .active{
            color:aquamarine;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <!-- ！！！注意用法，词汇用法！！！！！ -->
        <!-- class绑定对象语法  直接用class类名  -->
        <h1 :class="{color:iscolor,bgcolor01:true}">123456</h1>

        <!-- class绑定数组语法  间接在Vue-data里储存class类名-->
        <h1 :class="[activeClass,bgcolorClass]">123456</h1>

        <!-- style绑定对象语法 间接在Vue-data里储存class类名的对象名-->
        <!-- 注意没有 {} 符号 -->
        <h1 :style="styleObj01">1234567</h1>

        <!-- style绑定数组语法 -->
        <h1 :style="[styleObj01,styleObj02]">1234567</h1>


    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    iscolor:true,
                    activeClass: 'active',
                    bgcolorClass:'bgcolor02',

                    styleObj01:{
                        color:'red',
                        fontSize:'20px'
                    },
                    styleObj02:{
                        backgroundColor:"green"
                    }
                }
            }
        })

    </script>
</body>
</html>